<template>
    <!-- 查询条件 -->
    <el-card>
        <el-row>
            <el-col :span="12">
                <el-button plain @click="dialogFormVisible = true" type="primary">
                    新增房价计划
                </el-button>
                <el-dialog v-model="dialogFormVisible" title="新增房价计划" width="500">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="From" :rules="rules" label-width="auto"
                        class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="适用房型" prop="rtid">
                            <el-select v-model="From.rtid" placeholder="适用房型">
                                <el-option v-for="item in roomTypeData" :key="item.Rtid" :label="item.Rtname"
                                    :value="item.Rtid" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="产品名称" prop="productName">
                            <el-input v-model="From.productName" />
                        </el-form-item>
                        <el-form-item label="标准价" prop="normalPrice">
                            <el-input v-model="From.normalPrice" />
                        </el-form-item>
                        <el-form-item label="收款方式" prop="payMent">
                            <el-radio-group v-model="From.payMent" class="ml-4">
                                <el-radio :value="true" size="large">预定付费</el-radio>
                                <el-radio :value="false" size="large">到店付费</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="房间数量" prop="roomQuantity">
                            <el-input v-model="From.roomQuantity" />
                        </el-form-item>
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model="From.sort" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                确认
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-col>
            <el-col :span="12">
                <el-select v-model="stachDate.rtid" clearable placeholder="请选择" value="-1" @change="handleRegionChange"
                    size="500px">
                    <el-option label="全部房型" value="-1" />
                    <el-option v-for="item in roomTypeData" :key="item.Rtid" :label="item.Rtname" :value="item.Rtid" />
                </el-select>
            </el-col>
        </el-row>
    </el-card>
    <!-- 房价显示 -->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="Rtname" label="房型" align="center" />
        <el-table-column prop="ProductName" label="产品名称" align="center" />
        <el-table-column prop="PayMent" label="付款方式" align="center">
            <template v-slot="scope">
                <el-text v-if="scope.row.PayMent == 0" class="mx-1">到店付费</el-text>
                <el-text v-else class="mx-1">预定付费</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="NormalPrice" label="价格" align="center">
            <template v-slot="scope">
                ￥<span>{{ scope.row.NormalPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="State" label="状态" align="center">
            <template v-slot="scope">
                <el-text v-if="scope.row.State == 0" class="mx-1" type="success">启用</el-text>
                <el-text v-else class="mx-1" type="danger">停用</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="Sort" label="排序" align="center" />
        <el-table-column prop="date" label="操作" align="center">
            <template v-slot="scope">
                <el-link type="primary" @click="UpdState(scope.row.RpId, scope.row.State)"
                    v-if="scope.row.State == 1">启用</el-link>
                <el-link type="primary" @click="UpdState(scope.row.RpId, scope.row.State)"
                    v-else>停用</el-link>&nbsp;&nbsp;
                <el-link type="primary" @click="DelRoomPrices(scope.row.RpId)">删除</el-link>&nbsp;&nbsp;
                <el-link type="primary" @click="FindRoomPrice(scope.row.RpId)">编辑</el-link>
            </template>
        </el-table-column>
    </el-table>

    <!-- 修改房价计划开始 -->
    <el-dialog v-model="dialogFormVisible1" title="编辑房价计划" width="500">
        <el-form style="max-width: 600px" :model="FuleFrom" label-width="auto" class="demo-ruleForm" :size="formSize"
            status-icon>
            <el-form-item label="适用房型">
                <el-select v-model="FuleFrom.Rtid" placeholder="适用房型" :disabled="true">
                    <el-option v-for="item in roomTypeData" :key="item.Rtid" :label="item.Rtname" :value="item.Rtid" />
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input v-model="FuleFrom.ProductName" />
            </el-form-item>
            <el-form-item label="标准价">
                <el-input v-model="FuleFrom.NormalPrice" />
            </el-form-item>
            <el-form-item label="收款方式">
                <el-radio-group v-model="FuleFrom.PayMent" class="ml-4">
                    <el-radio :value="true" size="large">预定付费</el-radio>
                    <el-radio :value="false" size="large">到店付费</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="房间数量">
                <el-input v-model="FuleFrom.RoomQuantity" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="FuleFrom.Sort" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="UpdRoomPrice()">
                    确认
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 修改房价计划结束 -->
</template>
<script setup lang="ts">
//引入axios
import axios from 'axios';

//默认地址
axios.defaults.baseURL = 'http://localhost:5199/api/';

import { reactive, ref, onMounted } from 'vue'

import { ElMessage, ElMessageBox } from 'element-plus'

import type { FormInstance, FormRules } from 'element-plus'

const dialogFormVisible = ref(false)
const dialogFormVisible1 = ref(false)

const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

//房价添加
const From = reactive({
    rtid: "",
    productName: "",
    normalPrice: "",
    payMent: "",
    roomQuantity: "",
    sort: ""
})

//表单验证
const rules = reactive<FormRules>({
    rtid: [
        {
            required: true,
            message: '请选择适用房型',
            trigger: 'change',
        },
    ],
    productName: [
        { required: true, message: '请输入产品名称', trigger: 'blur' },
    ],
    normalPrice: [
        {
            required: true,
            message: '请输入标准价',
            trigger: 'change',
        },
    ],
    roomQuantity: [
        {
            required: true,
            message: '请输入房间数量',
            trigger: 'change',
        },
    ],
    sort: [
        {
            required: true,
            message: '请输入排序',
            trigger: 'change',
        },
    ],

})

//编辑房价计划
interface IRuleForm {
    RpId: number,
    Rtid: number,
    ProductName: string,
    NormalPrice: number,
    PayMent: true,
    RoomQuantity: number,
    Sort: number,
}

const FuleFrom = ref<IRuleForm>({})

//查询条件
const stachDate = reactive({
    rtid: "",
})

const tableData = ref([])//房价显示列表
const roomTypeData = ref([])//房型列表

//新增房价计划
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            axios.post(`RoomPrice/RoomPriceAdd`, From).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success("新增成功");
                    dialogFormVisible.value = false;
                    GetRoomPrice();
                } else {
                    ElMessage.error("新增失败");
                    return;
                }
            })
        }
    })
}

//房价显示
const GetRoomPrice = () => {
    axios.get(`RoomPrice/GetRoomPriceList?rtid=${stachDate.rtid || '-1'}`).then(res => {
        tableData.value = res.data.Data;
    })
}

//删除房价计划
const DelRoomPrices = (RpId: number) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '房价删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete(`RoomPrice/DelRoomprice?rpid=${RpId}`).then(res => {
                if (res.data.Code == 200) {
                    ElMessage.success("删除成功");
                    GetRoomPrice();
                } else {
                    ElMessage.error("删除失败");
                    return;
                }
            })
        })
        .catch(() => {

        })
}

//房型列表
const GetRoomTypeList = () => {
    axios.get(`RoomType/GetRoomList`).then(res => {
        roomTypeData.value = res.data;
    })
}

//启用禁用
const UpdState = (RpId: number, State: number) => {
    axios.post(`RoomPrice/GetRoomPriceState?rpid=${RpId}&state=${State}`).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success("启用成功");
            GetRoomPrice();
        } else {
            ElMessage.error("启用失败");
            return;
        }
    })
}

//编辑房价计划
const FindRoomPrice = (RpId: number) => {
    axios.get(`RoomPrice/FindRoomPrice?rpid=${RpId}`).then(res => {
        FuleFrom.value = res.data.Data;

    })
    dialogFormVisible1.value = true;
}

//修改房价计划
const UpdRoomPrice = () => {
    axios.post(`RoomPrice/UpdRoomPrice`, FuleFrom.value).then(res => {
        if (res.data.Code == 200) {
            ElMessage.success("修改成功");
            GetRoomPrice();
            dialogFormVisible1.value = false;
        } else {
            ElMessage.error("修改失败");
            return;
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const handleRegionChange = () => {
    GetRoomPrice();
}

//勾子函数
onMounted(() => {
    GetRoomPrice();
    GetRoomTypeList();
})

</script>


<style>
.demo-form-inline .el-input {
    --el-input-width: 260px;
}

.demo-form-inline .el-select {
    --el-select-width: 260px;
}
</style>